<template>
	<div class="sys-menu-edit-container">
		<el-card class="breadcrumb-card card-form" :style="{height:formHeight+'px'}">
			<!-- 路径导航 -->
			<div slot="header" class="breadcrumb-header">
				<el-page-header @back="$router.back()" title="菜单管理" content="编辑"/>
				<div class="btn-list">
					<el-button size="small" type="primary" @click="submit">保存<i class="el-icon-check el-icon--right"/></el-button>
					<el-button size="small" @click="$router.back()">取消<i class="el-icon-close el-icon--right"/></el-button>
				</div>
			</div>
			<!-- form表单 -->
			<el-scrollbar class="form edit-form">
				<el-form ref="form" :model="form" label-width="90px" :show-message="false" :rules="rules">
					<el-row :gutter="100">
						<el-col :span="12">
							<el-form-item label="类型:" prop="showStatus">
								<el-select size="medium" v-model="form.showStatus" placeholder="请选择">
									<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"/>
								</el-select>
							</el-form-item>
						</el-col>		
						<el-col :span="12">
							<el-form-item label="名称:" prop="name">
								<el-input size="medium" v-model="form.name" placeholder="请输入名称"></el-input>
							</el-form-item>
						</el-col>	
					</el-row>
					<el-row :gutter="100">
						<el-col :span="12">
							<el-form-item label="父级:" prop="parentId">
								<el-cascader
								    v-model="menuTreeSelected"
										:props="{checkStrictly: true,children: 'childList',label: 'name',value: 'id'}"
								    :options="menuTree"
								    @change="selectParentMenu"/>
							</el-form-item>
						</el-col>		
						<el-col :span="12">
							<el-form-item label="排序:" prop="sort">
								<el-input-number size="medium" v-model="form.sort" :min="1" :max="100" label="描述文字"></el-input-number>
							</el-form-item>
						</el-col>	
					</el-row>
					<el-row :gutter="100">
						<el-col :span="12">
							<el-form-item label="权限:" prop="permission">
								<el-input size="medium" v-model="form.permission" placeholder="请输入权限"></el-input>
							</el-form-item>
						</el-col>		
						<el-col :span="12" v-if="form.showStatus == '1'">
							<el-form-item label="链接:" prop="href">
								<el-input size="medium" v-model="form.href" placeholder="请输入链接"></el-input>
							</el-form-item>
						</el-col>	
					</el-row>
				</el-form>
			</el-scrollbar>
		</el-card>			
	</div>
</template>

<script>
import sysMenuApi from '@/api/sysMenuApi'
	
export default {
	name: 'sysMenuEdit',
	data () {
		return{
			formHeight: 0,
			/* 表单数据 */
			form: {
				showStatus: '1',
				sort: 10,
				parentId: ''
			},
			/* 用户类型 */
			typeOptions: [{value: '0',label: '按钮'},{value: '1',label: '菜单'}],
			/* 校验规则 */
			rules: {
				name: [{required: true, message: '请输入名称'}],
				permission: [{required: true, message: '请输入权限'}],
				sort: [{required: true, message: '请输入排序数字'}]
			},
			/* 菜单树 */
			menuTree: [],
			menuTreeSelected: []
		}
	},
	mounted () {
		this.$nextTick(() => { 
			let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			this.formHeight = h -80;
		});
	},
	created () {
		//获取详情
		if(this.$route.query.id){
			this.getDetail();
		}else{
			this.form.parentId = 0;
		}
		//获取系统菜单树
		this.getMenuTree();
	},
	methods: {
		/* 获取详情 */
		async getDetail () {
			const result = await sysMenuApi.sysMenuDetail(this.$route.query.id);
			this.form = result.data;
			//设置菜单选中
			var idArr = result.data.parentIds.split(",").reverse();
			//删除第一个元素
			idArr.shift()
			//字符数组转化为数字数组
			idArr.forEach((item,index) =>{
				idArr[index] = parseInt(idArr[index])
			})
			this.menuTreeSelected = idArr;
		},
		/* 获取系统菜单树 */
		async getMenuTree () {
			const result = await sysMenuApi.sysMenuTree();
			this.menuTree = result.data;
		},
		/* 选择父级菜单 */
		selectParentMenu (arr) {
			this.form.parentId = arr[arr.length-1]
			this.menuTreeSelected = arr;
		},
		/* 提交表单 */
		async submit () {
			this.$refs.form.validate(async (valid, error) => {
				/* 校验数据 */
				if(valid){
					let result;
					if(this.form.id){
						//编辑
						result = await sysMenuApi.updateMenu(this.form);
					}else{
						//新增
						result = await sysMenuApi.addMenu(this.form);
					}
					if(result.code == 200){
						this.$message.success('操作成功!');
						this.$router.back();
					}else{
						this.$message.error(result.msg);
					}
				}else{
					this.$message.error(error[Object.keys(error)[0]][0].message)
				}
			})
		}
	}
}	
</script>

<style lang="scss">
.sys-menu-edit-container{
	
}	
</style>
